<template>
  <div class="container">
    <div class="name">
      <input type="text" v-model="username"/>
    </div>
    <div class="but">
      <input type="button" value="确定" @click="login" />
    </div>
  </div>
</template>

<script setup>
import {ref} from "vue";
import {reqLogin} from "@/api/index.js";
import {useRouter} from "vue-router";
import {setUserInfo} from "@/util/LocalUtils.js";

const router = useRouter()

const username = ref("")
async function login() {
  if (username.value === '') {
    return
  }
  const resp = await reqLogin({appId: 1, userId: username.value})
  setUserInfo(resp.data)
  await router.push({name: "Home", query: {userId: resp.data.userId}})
}
</script>

<style scoped>
.container {
  width: 400px;
  height: 200px;
  border: 1px solid #dee0e3;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  .name {
    width: 280px;
    margin-top: 40px;
    input {
      width: calc(100% - 20px);
      height: 36px;
      border: 1px solid #dee0e3;
      border-radius: 20px;
      padding: 0 10px;
    }
  }
  .but {
    width: 280px;
    margin-top: 20px;
    input {
      width: 100%;
      height: 36px;
      border-radius: 20px;
      border: 1px solid #dee0e3;
    }
    input:hover {
      background-color: #d4dbe3;
    }
  }
}
</style>